<template>
    <scroll-view scroll-y class="warp">
        <view class="contner">
            <!-- 购物车列表 -->
            <scroll-view scroll-y>
                <view class="list_cat" v-for="(item, index) in list" :key="item._id">
                    <view class="icon_v">
                        <u-icon name="checkmark-circle-fill" :color="item.checked ? '#fdd100' : '#909399'" size="28"
                            @click="pitch(index)"></u-icon>
                    </view>
                    <view class="img_v">
                        <image :src="item.img" mode="scaleToFill" />
                    </view>
                    <view class="list_contner">
                        <view class="name">{{ item.name }}}</view>
                        <view class="size">大包</view>
                        <view class="pc_count">
                            <view class="pc">￥{{ item.price }}</view>
                            <u-number-box :value="item.num" :step="1" :name="item._id" @change="valChange"></u-number-box>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="footer">
            <view class="icon_v">
                <u-icon name="checkmark-circle-fill" :color="allchcked ? '#fdd100' : '#909399'" size="28"
                    @click="checkAll"></u-icon>
                <text>全选</text>
            </view>
            <view class="count">合计:<text>￥{{ totalmem }}</text></view>
            <view class="purchase" @click='buy'> 购买</view>
        </view>
    </scroll-view>
</template>

<script>
import BigNumber from 'bignumber.js';
import { get_cart_list, get_toggle_check_cart, get_change_num, get_cancel_cart, get_check_cart } from "../../api/api"
export default {
    data() {
        return {
            uid: uni.getStorageSync('uid'),
            value: 0,
            list: [],
        }
    },
    computed: {
        allchcked() {
            return this.list.every(v => v.checked)
        },
        //合计
        totalmem() {
            if (this.list.lenght == 0) return 0
            return this.list.reduce((current, v) => {
                if (v.checked) {
                    current = new BigNumber(v.price).times(v.num).plus(current);
                    current = current.toString() - 0;
                }
                return current;
            }, 0);

        }
    },
    mounted() {
        //购物车列表
        let { uid } = this
        get_cart_list({ uid }).then(res => {
            console.log(res)
            this.list = res.data
        })

    },
    methods: {

        //单选，取消单选
        pitch(index) {
            // console.log(index)
            let checked = this.list[index].checked
            // console.log(checked)
            let _id = this.list[index]._id
            console.log(_id)
            get_toggle_check_cart({ checked, _id }).then(res => {
                console.log(res)
                this.list[index].checked = !checked
                console.log(this.list[index].checked)
            })
        },
        //购物车数量
        valChange(e) {
            console.log(e)
            let _id = e.name;
            let num = e.value

            get_change_num({ _id, num }).then(res => {
                console.log(res)
            })
        },
        //全选、反选
        checkAll() {
            let allchcked = this.allchcked
            console.log(allchcked)
            if (allchcked) {
                get_cancel_cart({
                    _id: this.list.map(v => v._id)
                }).then(res => {
                    console.log(res)
                })
            } else {
                get_check_cart({
                    _id: this.list.map(v => v._id)

                }).then(res => {
                    console.log(res)
                })
            }
            this.list.forEach(v => {
                v.checked = !allchcked;
            });
        },
        buy() {
            let arr = this.list.filter((v) => {
                return v.checked
            })
            console.log(arr)
            if (arr.lenght == 0) {
                console.log('至少选择一个商品')
            }
            let cart_ids = arr.map((v) => {
                return v._id
            })
            // console.log(cart_ids)
            uni.navigateTo({ url: `/pages/order/createOrder?cart_id=${cart_ids}` })
        }
    },
}
</script>

<style lang="scss" scoped>
.warp {


    .contner {
        width: 94%;
        margin: 10px auto;
        border-radius: 10px;
        background-color: #fff;

        .list_cat {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 5px;

            .icon_v {
                width: 10%;
            }

            .img_v {
                width: 25%;

                image {
                    width: 100%;
                    height: 100px;
                }
            }

            .list_contner {
                width: 65%;

                .name {
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2; // 控制多行的行数
                    -webkit-box-orient: vertical;
                }

                .size {
                    width: 30px;
                    height: 20px;
                    background-color: #f6f6f6;
                    color: #000;
                    font-size: 12px;
                    text-align: center;
                    line-height: 20px;
                }

                .pc_count {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 5px;

                    .pc {
                        color: red;
                    }


                }

            }

        }


    }

    .footer {
        width: 100%;
        height: 40px;
        position: fixed;
        bottom: 48px;
        z-index: 999;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        // padding: 0 10px;
        align-items: center;
        border-bottom: 1px solid #ccc;

        .icon_v {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 10px;

        }

        .count {
            margin-left: 50px;

            text {
                color: red;

            }
        }

        .purchase {
            margin-right: 10px;
            width: 80px;
            height: 30px;
            background-color: red;
            color: #fff;
            border-radius: 25px;
            text-align: center;
            line-height: 30px;
        }
    }
}
</style>